<template>
  <div class="quanList page">
    <div class="header items-center bg-white sticky">
      <div
        class="item items-center justify-center"
        v-for="(item, index) in statuss"
        :key="index"
        :class="{ select: item.value === currentStatus }"
        @tap="changeStatus(item)"
      >
        <span class="name">{{ item.name }}</span>
        <label class="line" v-if="item.value === currentStatus"></label>
      </div>
    </div>
    <div class="list flex-col items-center">
      <div
        class="item flex-row"
        :class="{ used: currentStatus === 2 }"
        v-for="(item, index) in dataList"
        :key="index"
        @tap="receiveQuan(item, index)"
      >
        <div class="left flex-col items-center">
          <div class="price justify-center items-baseline">
            <label>￥</label>
            <span class="text">{{ item.formValue }}</span>
          </div>
          <div class="name">{{ item.assignString }}</div>
        </div>
        <div class="right flex-col">
          <view class="rightname">
            <!-- <span class="tag" v-if="item.type == 3">商家</span> -->
            <span class="tag" v-if="item.type == 1">平台</span>
            <span class="tag" v-if="item.type == 2">商户</span>
          </view>
          <view class="righttaps">
            <span class="name ellipsis_1">{{ item.name }}</span>
            <span class="tips">{{ item.thresholdValueString }}</span>
            <view class="user">
              <span class="tips">{{ item.starteEndTimeString }}</span>
              <view
                class="viewimg com3"
                v-if="item.type == 2 && item.isReceive == 1"
                >立即使用</view
              >
              <view
                class="viewimg com1"
                v-if="item.type == 1 && item.isReceive == 1"
                >立即使用</view
              >
              <!-- v-if="item.type == 1 && item.isReceive == 2" -->
              <img
                v-if="item.type == 1 && item.isReceive == 2"
                src="../../static/icones/coupon7.png"
                alt=""
              />
              <img
                v-if="item.type == 2 && item.isReceive == 2"
                src="../../static/icones/coupon8.png"
                alt=""
              />
            </view>
            <!-- <img
              v-if="currentStatus == 2"
              class="imges"
              src="../../static/icones/coupon1.png"
              alt=""
            /> -->
          </view>
        </div>
      </div>
      <NoData v-if="dataList.length === 0" />
    </div>
  </div>
</template>

<script>
import NoData from "../../components/noData.vue";
import { getCouponList, getReceiveCoupon } from "../../config/api";
export default {
  components: { NoData },
  data() {
    return {
      currentStatus: null,
      dataList: [],
      data: {
        page: 1,
        size: 10,
        finish: false,
      },
      isFromMy: false,
      ids: [],
      activityId: "",
      isShow: false,
    };
  },
  computed: {
    statuss() {
      if (this.isFromMy) {
        return [
          { name: "可用", value: 1 },
          { name: "不可用", value: 2 },
        ];
      } else {
        return [
          { name: "全部", value: null },
          { name: "平台券", value: 1 },
          { name: "商户券", value: 2 },
        ];
      }
    },
    type() {
      // this.statuss.find(item => item.value === this.currentStatus)
      // return this.statuss[this.currentStatus] ? this.statuss[this.currentStatus].value : null
    },
  },
  mounted() {
    // const { from } = this.$query();
    // if (from === "my") {
    //   this.$taro.setNavigationBarTitle({ title: "我的优惠券" });
    //   this.isFromMy = true;
    //   this.currentStatus = 1;
    // } else {
    //   this.$taro.setNavigationBarTitle({ title: "领券中心" });
    // }
    this.getList();
  },
  filters: {
    changeType(type) {
      return (
        {
          1: "平台优惠券",
          2: "商户优惠券",
        }[type] || "新人优惠券"
      );
    },
  },
  onPullDownRefresh() {
    this.resetData();
  },
  onReachBottom() {
    if (this.data.finish) {
      return;
    }
    this.data.page += 1;
    this.getList();
  },
  onShareAppMessage() {
    // 返回自定义分享信息
    return {
      title: this.$appName,
      desc: "免押金租赁，首月0元租到手",
      path: "pages/index/index",
    };
  },
  methods: {
    handledel() {
      this.isShow = false;
      console.log("00000===0");
    },
    changeStatus({ value }) {
      this.currentStatus = value;
      this.resetData();
    },
    async getList() {
      const params = {
        pageNumber: this.data.page,
        pageSize: this.data.size,
        type: this.currentStatus,
        isUsed: this.currentStatus,
      };
      try {
        const { data } = await getCouponList({
          ...params,
          sessionId: "c22eeb72a2abdc87a2e8b2c6865d230d_61985",
        });
        console.log(data, "datada");
        // return;
        if (this.isFromMy) {
          const { couponDTOList } = data;
          if (couponDTOList.length < this.data.size) {
            this.data.finish = true;
          } else {
            this.data.finish = false;
          }
          this.dataList.push(...couponDTOList);
          console.log(data, "122");
        } else {
          if (data.length < this.data.size) {
            this.data.finish = true;
          } else {
            this.data.finish = false;
          }
          this.dataList.push(...data);
          this.params = data.map((item) => ({
            activityId: item.id,
            outBizNo: item.outBizNo,
            voucherCode: item.voucherCode,
          }));
          // console.log(this.dataList,this.params,data.map(item => ({ activityId: item.id ,outBizNo:item.outBizNo,voucherCode:item.voucherCode})),'222');
          this.ids = data.map((item) => ({ id: item.id }));
          this.activityId = this.ids.id;
          // console.log(this.ids, "000");
          // console.log(data, "129");
        }
      } catch (err) {
        console.log(err);
      }
    },
    getTop(type) {
      if (type === 3) {
        console.log("1111111");
        // if (this.$env === "alipay") {
        //   // 支付宝内
        //   this.isShow = true;
        // }
        this.isShow = true;
        // return;
      }
    },
    async receiveQuan(
      { id, isReceive, type, url, assign, storeId, goodsId },
      index
    ) {
      // 是否领取 1、是 2、否
      if (isReceive === 2 && this.isFromMy === false) {
        // 未领取
        const params = {
          couponId: id,
        };
        const res = await getReceiveCoupon({
          ...params,
          sessionId: "c22eeb72a2abdc87a2e8b2c6865d230d_61985",
        });
        // this.dataList[index].isReceive = 1;
        console.log(res, "领取成功");
        // this.$toast("领取成功", "success");
      } else {
        console.log("pppppp");
        // 已领取
        // if (type === 1) {
        //   // 平台券
        //   // if (url) {
        //   //   // url有值就跳到活动链接  否则就去首页
        //   //   this.$goPage(`/pages/webview/index?url=${encodeURIComponent(url)}`);
        //   // } else {
        //   //   this.$goPage("/pages/index/index");
        //   // }
        //   console.log("99");
        // } else {
        //   // 商品券
        //   if (assign === 1) {
        //     // 1.全部商品
        //     // this.$goStore(storeId);
        //   } else {
        //     // 部分商品如果goodsid有值就是去到商品详情，否则就去商家
        //     // if (goodsId) {
        //     //   this.$goGoodsDeail({ id: goodsId, type: 2 });
        //     // } else {
        //     //   this.$goPage(`/pagesIndex/storeInfo/index?id=${storeId}`);
        //     // }
        //   }
        // }
      }
    },
    resetData() {
      this.data.page = 1;
      this.data.finish = false;
      this.dataList = [];
      // this.$taro.pageScrollTo({ scrollTop: 0 });
      this.getList();
    },
    changeReceiveText(isReceive) {
      if (this.isFromMy) {
        return this.currentStatus === 1 ? "去使用" : "不可用";
      } else {
        return isReceive === 1 ? "点击使用" : "点击领取";
      }
    },
  },
};
</script>
<style lang="scss">
.quanList {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background-color: #f5f5f5;
  .header {
    // position: fixed;
    // top: 0;
    // left: 0;
    width: 100%;
    height: 35px;
    z-index: 1;
    .item {
      flex: 1;
      position: relative;
      height: 100%;
      &.select {
        .name {
          color: #29b5ff;
        }
      }
      .name {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 23px;
        color: #232323;
      }
      .line {
        position: absolute;
        left: calc(50% - 26.5px);
        bottom: 3px;
        width: 53px;
        height: 3px;
        background: #29b5ff;
        border-radius: 2px;
      }
    }
  }
  .list {
    padding: 12px;
    overflow: auto;
    .item {
      background-image: url("../../static/icones/coupon2.png");
      background-position: center center;
      background-size: 100% 100%;
      width: 100%;
      height: 115px;
      position: relative;
      margin-bottom: 12px;
      color: #0096ff;
      &.used {
        background-image: url("../../static/icones/coupon3.png");
        // color: #fff;
        // .tips {
        //   color: #fff !important;
        // }
      }
      .quan-type {
        position: absolute;
        top: 12px;
        right: 14px;
        font-weight: bold;
        font-size: 14px;
      }
      .left {
        width: 29%;
        height: 115px;
        justify-content: center;
        // background-color: rgb(177, 221, 105);
        .price {
          color: #e21a1a;
          font-weight: 700;
          font-size: 15px;
          font-family: DINPro-Bold;
          .text {
            font-size: 28px;
            font-weight: 500;
            font-family: DINPro-Medium;
            line-height: 54px;
          }
        }
        .name {
          font-size: 10px;
          color: #3d3d3d;
          // margin-top: 8px;
        }
      }
      .right {
        width: 71%;
        height: 115px;
        .rightname {
          width: 100%;
          height: 24px;
          display: flex;
          justify-content: flex-end;
          .tag {
            width: 44px;
            height: 21px;
            border-radius: 0 10px 0 10px;
            color: #e21a1a;
            font-size: 12px;
            text-align: center;
            line-height: 21px;
            background: rgba(226, 26, 26, 0.1);
          }
        }
        .righttaps {
          flex: 1;
          padding: 0 15px 15px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          position: relative;
          .name {
            color: #3d3d3d;
            font-size: 15px;
            line-height: 23px;
            font-family: PingFang SC Bold;
          }
          .tips {
            color: #6d6d6d;
            font-size: 10px;
            line-height: 18px;
            font-family: PingFang SC Medium;
          }
          .user {
            display: flex;
            justify-content: space-between;
            .viewimg {
              width: 68px;
              height: 24px;
              font-family: PingFang SC Bold;
              font-size: 12px;
              line-height: 24px;
              color: #fff;
              border-radius: 12px;
              text-align: center;
              &.com3 {
                background: linear-gradient(
                  289deg,
                  #e21a1a 0%,
                  #e21a1a 0%,
                  #fa5e5e 100%,
                  #fa5e5e 100%
                );
              }
              &.com1 {
                background: linear-gradient(
                  289deg,
                  #157afe 0%,
                  #157afe 0%,
                  #6dacff 100%,
                  #6dacff 100%
                );
              }
            }
            img {
              width: 68px;
              height: 24px;
            }
          }
          .imges {
            width: 72px;
            height: 54px;
            position: absolute;
            right: 10px;
            bottom: 10px;
          }
        }
        // .tips {
        //   font-size: 12px;
        //   margin-bottom: 6px;
        //   color: #555555;
        //   font-size: 12px;
        //   &.time {
        //     color: #aaa;
        //   }
        // }
        .btn {
          .img {
            width: 70px;
            height: 22px;
          }
        }
      }
    }
  }
}
</style>
